<template>
  <div class="home">
    <ul>
      <li v-for="(item, index) in tasks.records" :key="index">
        <TaskCard :task="item" />
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { getTaskAcceptablePageApi } from "@/api/task/api";
import { TaskAll, TaskDto, TaskInfo } from "@/api/task/type";
import TaskCard from "../../components/task-card/TaskCard.vue";
import { useRouter } from "vue-router";

const form = reactive<TaskDto>({
  name: "",
  pageNum: 1,
  pageSize: 5,
  type: "0",
  minPlanB: 0,
  maxPlanB: 0
});

const tasks = reactive<TaskAll>({
  countId: 0,
  current: 0,
  hitCount: false,
  maxLimit: null,
  optimizeCountSql: false,
  orders: [],
  pages: 0,
  records: [],
  searchCount: false,
  size: 0,
  total: 0
});

const getTaskAcceptablePage = () => {
  getTaskAcceptablePageApi(form).then((res) => {
    if (res.code === 200) {
      Object.assign(tasks, res.data);
    }
  });
};

onMounted(() => {
  getTaskAcceptablePage();
});
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  ul {
    li {
      margin-bottom: 20px;
    }
  }
}
.link {
  text-decoration: none;
  color: inherit;
}
</style>
